import React from "react";
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {NavBar, TabBar, Image} from 'antd-mobile'
import styles from './index.less'
import {AppOutline, HandPayCircleOutline, UnorderedListOutline, UserOutline} from "antd-mobile-icons";
import {PlusCircleOutlined} from "@ant-design/icons";
import AddPayOrIncomeLog from "../AddPaymentOrIncome"
import AddLendOrOwe from "../AddLendOrOwe"
import Analyse from "@/pages/Analyse";
import PaymentLogs from "@/pages/PaymentLogs";
import MyProfile from "@/pages/User/MyProfile";

const HomeNav: React.FC = () => {
  const history = useHistory()
  const location = useLocation()
  const {pathname} = location

  const setActiveKey = (value: string) => {
    history.push(value)
  }

  const tabs = [
    {
      key: '/analyse',
      title: '图表',
      icon: <AppOutline />,
    },
    {
      key: '/todo',
      title: '流水',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/addPaymentOrIncome',
      title: "记一笔",
      icon: <PlusCircleOutlined/>
    },
    {
      key: '/lendOrOwe',
      title: '往来',
      icon: <HandPayCircleOutline />,
    },
    {
      key: '/myProfile',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  return (
    <>
      <TabBar
        activeKey={pathname}
        onChange={value => setActiveKey(value)}
      >
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
}
export default () => {
  return (
    <Router initialEntries={['/analyse']}>
      <div className={styles.app}>
        <div className={styles.top}>
          <NavBar
            backArrow={true}
            right={<Image style={{width: 32, height: 28, float:"right"}} src={"/logo.svg"}/>}
          >
            <a style={{fontSize: 18, display: "flex", justifyContent: "center"}}>
              流水账
            </a>
          </NavBar>
        </div>
        <div className={styles.body}>
          <Switch>
            <Route exact path='/analyse'>
              <Analyse />
            </Route>
            <Route exact path='/todo'>
              <PaymentLogs  update={false}/>
            </Route>
            <Route exact path='/addPaymentOrIncome'>
              <AddPayOrIncomeLog />
            </Route>
            <Route exact path='/lendOrOwe'>
              <AddLendOrOwe />
            </Route>
            <Route exact path='/myProfile'>
              <MyProfile />
            </Route>
          </Switch>
        </div>
        <div style={{height: 90}}/>
        <div className={styles.bottom}>
          <HomeNav />
        </div>
      </div>
    </Router>
  )
};
